<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>我的学会</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />

    <style>
			html, body {width: 100%;min-height: 100%;background: #f0f0f0;}
	    	.h20 {height: 0.5rem;background: #f0f0f0;}

	    .xhList ul {
	      background: #f0f0f0;
	    }
	    .xhList .aui-list-item {
	      background: #fff;
	      margin: 1rem 0;
	    }
			/* 无数据块 */

			.enshrine_wu_box_fiexd {
					position: fixed;
					top: 0;
					left: 0;
					background-color: #fff;
					width: 100%;
					height: 100vh;
			}

			.enshrine_wu_box {
					height: 100%;
					display: table;
			}

			.enshrine_wu {
					text-align: center;
					height: 100%;
					display: table-cell;
					vertical-align: middle;
			}

			.enshrine_wu_ico {
					width: 85%;
					margin: 0 auto 1rem;
			}

			.enshrine_wu_txt {
					font-size: 20px;
					color: #4d4d4d;
			}
			.xhList {
				min-height: calc(100vh - 65px);
			}
    </style>
</head>
<body>
		<section class="aui-refresh-content learn">
	<div id="app" v-cloak>

		<!-- 无数据时显示 -->
		<div v-if="code == 1" class="enshrine_wu_box_fiexd">
				<div class="enshrine_wu_box">
						<div class="enshrine_wu">
								<img src="../../image/enshrine_list_wu_ico.png" class="enshrine_wu_ico" alt="">
								<div class="enshrine_wu_txt">还没有学会...</div>
						</div>
				</div>
		</div>

	<div v-else class="aui-content aui-margin-b-15 xhList">
	  <ul class="aui-list aui-media-list">
	    <li class="aui-list-item aui-list-item-middle" v-for="item in newsList" tapmode="presshover" @click="openNewWindow(item.id,'educationalsociety',item.name)">
	      <div class="aui-media-list-item-inner">
					<div class="aui-list-item-media" style="width: 3rem;">
	          <img :src="item.head_pic" class="aui-img-round aui-list-img-sm">
	        </div>
	        <div class="aui-list-item-inner">
	          <div class="aui-list-item-text">
	            <div class="aui-list-item-title aui-font-size-14">{{item.name}}</div>
	            <div class="aui-list-item-right">会员数：{{item.headcount}}</div>
	          </div>
	        </div>
	      </div>
	    </li>
	  </ul>
	</div>
</div>
</section>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">

  apiready = function() {
    var app = new Vue({
      el: '#app',
      data: {
        newsList: [],
        token: '',
        code: 1,
  			page: 1,
  			totalpage: 2
      },
      created: function() {
        var $_this = this;
        $_this.token = $api.getStorage('token') || '';
				if(!$api.getStorage('token')){
	        api.confirm( {
	            title: '是否登录',
	            msg: '确认是否登录？',
	            buttons: [ '确定', '取消' ]
	          }, function ( ret, err ) {
	            var index = ret.buttonIndex;
	            if ( index == 1 ) {
	              api.openWin({
	                name: 'login',
	                url: '../five_frame/login_header.html',
	                delay: 200,
	                bounces: false
	              });
	              return;
	            } else {
	              api.closeWin({
	                  name: name
	              });
	              return
	            }
	          })
	          return
	        }
        api.ajax({
         url: window.Url.myLearn + $_this.page,
         method: 'GET',
         headers: {
             'baseParams':$_this.token
         },
         timeout: 300,
       }, function(ret, err) {
				 if (ret.code == 2) {
                  alert('用户未登录，请返回登录')
                  $api.rmStorage('token')
                  $api.rmStorage('data')
                  goback()
                   return
                }else if (ret.code == 0) {
             // api.alert({ msg: JSON.stringify(ret) });
             if (ret.data.newsList != '') {
               $_this.code = 0;
               $_this.totalpage = ret.data.totalpage;
               $_this.newsList = ret.data.newsList;


             }
           } else if(ret.code == 1) {

					 } else {
               api.alert({ msg: JSON.stringify(err) });
           }
       })

			 var scroll = new auiScroll({
					 listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
					 distance:40 //判断到达底部的距离，isToBottom为true
			 },function(ret){
					if (ret.isToBottom) {
						$_this.page ++
						if ($_this.page > $_this.totalpage) {
							$_this.page = $_this.totalpage
							return
						}
						api.ajax({
						 url: window.Url.myLearn + $_this.page,
						 timeout: 300,
					 }, function(ret, err) {
							 if (ret) {
				           if (ret.code == 0) {
									//  api.alert({ msg: JSON.stringify(ret) });
									 $_this.newsList = $_this.newsList.concat(ret.data.newsList)
								 }

							 } else {
									 api.alert({ msg: JSON.stringify(err) });
							 }
					 })
					}

			 });


			 var pullRefresh = new auiPullToRefresh({
					 container: document.querySelector('.learn'),
					 triggerDistance: 100
			 },function(ret){
					 if(ret.status=="success"){
						 $_this.page = 1
						 api.ajax({
							url: window.Url.myLearn + $_this.page,
							method: 'GET',
							headers: {
									'baseParams':$_this.token
							},
							timeout: 300,
						}, function(ret, err) {
								if (ret.code == 0) {
									// api.alert({ msg: JSON.stringify(ret) });
									setTimeout(function() {
										if (ret.data.newsList != '') {
											$_this.code = 0;
											$_this.totalpage = ret.data.totalpage;
											$_this.newsList = ret.data.newsList;
											 pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏

										}
									},500)

								} else if(ret.code == 1) {

									setTimeout(function() {
									 pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
								 },500)
								} else {
										api.alert({ msg: JSON.stringify(err) });
								}
						})

					 }
			 })

      },
      filters: {
  		  time: function (value) {
  		    value = new Date(value)
  		    return value.getMonth() + '月' + value.getDate() + '日 ' + value.getHours() + ':' + value.getMinutes()
  		  }
  		},
      methods: {
        openLogin:function (){
  				api.openWin({
  					name: 'login',
  					url: './login_header.html',
  					bounces: false,
  					delay:200
  				});
  			},

        openNewWindow:function (id,type,title){
        		api.openWin({
        			name: type,
        			url: './forth_header.html',
        			pageParam: {id: id,name: type,title: title},
        			bounces: false,
        			delay:200
        		});
        	}
      },
			mounted:function() {
				var $_this = this;

			}
    })
  }
	function goback () {
	    api.closeWin({name:api.pageParam.name});
	  }
</script>
</html>
